<template>
  <div class="pageContent">
    <div class="htmlContent">
      <div style="padding: 2px 0; margin: 28px 0 28px 0">
        <div style="font-weight: bold; font-size: 20px">采购编辑</div>
      </div>
      <!-- 表单 -->
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div
          style="
            width: 80%;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
          "
        >
          <div
            v-for="(item, index) in listFormat"
            :key="index"
            style="display: flex; width: 100%; border-bottom: 1px solid black"
          >
            <div
              v-for="(el, ind) in item"
              :key="ind"
              :style="
                ind == 0
                  ? 'width:30%;border-right: 1px solid black;padding:20px 0;display: flex;justify-content: center;align-items: center;'
                  : 'width:60%;overflow-wrap: anywhere;padding:20px 0;display: flex;justify-content: center;align-items: center;margin:0 auto;'
              "
            >
              <div v-if="ind == 1">
                <!-- 0,1表示填报人 -->
                <div
                  v-if="index == 0"
                  style="display: flex; justify-content: center"
                >
                  <el-form-item label="" prop="author">
                    <el-input
                      style="width: 30vw"
                      v-model="form.author"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                </div>
                <!-- 日期 -->
                <div v-else-if="index == 1">
                  <el-form-item label="" prop="buyDate" autocomplete="off">
                    <el-date-picker
                      v-model="form.buyDate"
                      style="width: 30vw"
                      placeholder="选择日期时间"
                      type="date"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      size="small"
                    ></el-date-picker>
                  </el-form-item>
                </div>
                <!-- 价格 -->
                <div v-else-if="index == 2">
                  <el-form-item label="" prop="buyPrice">
                    <el-input
                      style="width: 30vw"
                      v-model="form.buyPrice"
                    ></el-input>
                  </el-form-item>
                </div>
                <!-- 标题 -->
                <div v-else-if="index == 3">
                  <el-form-item label="" prop="title">
                    <el-input
                      style="width: 30vw"
                      v-model="form.title"
                    ></el-input>
                  </el-form-item>
                </div>
                <!-- 内容 -->
                <div v-else-if="index == 4">
                  <el-form-item label="" prop="content">
                    <el-input
                      type="textarea"
                      style="width: 30vw"
                      :rows="5"
                      v-model="form.content"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div v-else>
                {{ el }}
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div style="display: flex">
        <div style="margin-left: auto; margin-right: 7vw; margin-top: 1vw">
          <el-button
            type="primary"
            style="margin: left"
            size="small"
            @click="submit"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    /* 自定义校验 */
    var checkTime = (rule, value, callback) => {
      console.log(value, "value");
      if (value == undefined || value == "" || value == null) {
        callback("请选择填报时间");
      } else {
        callback();
      }
    };
    return {
      listFormat: [
        ["填报人", ""],
        ["填报日期", ""],
        ["采购价格", ""],
        ["采购标题", ""],
        ["采购内容", ""],
      ], //列表格式
      form: {
        author: "",
        buyDate: "",
        buyPrice: "",
        title: "",
        content: "",
      },
      rules: {
        author: [{ required: true, message: "请输入填报人", trigger: "blur" }],
        buyPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        buyDate: [{ validator: checkTime, trigger: "blur" }],
      },
    };
  },
  created() {
    //默认
    this.form.author = this.$store.state.user.info.name;
    this.form = JSON.parse(this.$Base64.decode(this.$route.query.row));
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http.post("/updatePurchase", this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success("修改成功");
              //返回上一页
              this.$router.go(-1)
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
@import url("../../../styles/pages.scss");
</style>